<template>
  <div>
    <a-form
      :model="pageSettings.drawSettings"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
    >
      <a-form-item label="画布宽度" name="width" :rules="[{ required: true, message: '该项必填' }]">
        <a-input v-model:value="pageSettings.drawSettings.width" />
      </a-form-item>
      <a-form-item
        label="画布高度"
        name="height"
        :rules="[{ required: true, message: '该项必填' }]"
      >
        <a-input v-model:value="pageSettings.drawSettings.height" />
      </a-form-item>
      <a-form-item
        label="画布背景色"
        name="bgColor"
        :rules="[{ required: true, message: '该项必填' }]"
      >
        <a-input v-model:value="pageSettings.drawSettings.bgColor" />
      </a-form-item>
      <a-form-item label="额外的class" name="classArr">
        <a-select
          v-model:value="pageSettings.drawSettings.classArr"
          mode="multiple"
          style="width: 180px"
          placeholder="请选择..."
          :max-tag-text-length="10"
          :options="classOptions"
        ></a-select>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { useDesignerStore } from '@/stores/designerStore'
import { allClassList } from '@/utils/ConstUtils'
import { storeToRefs } from 'pinia'

const designerStore = useDesignerStore()
const { pageSettings } = storeToRefs(designerStore)
const classOptions = ref(allClassList)
</script>

<style scoped></style>
